<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" id="txt">
    <div id="test">
        <p id="box"></p>
    </div>
</body>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    #test {
        width: 500px;
        height: 400px;
        border: 1px solid red;
        margin: 50px auto;
        position: relative;
    }

    p {
        width: 30px;
        height: 30px;
        background: orange;
        position: absolute;
        top: 0;
        left: 0;
    }

    body {
        height: 2000px;
    }
</style>

</html>
<script>
    // function fun(a,b){
    //     let time = null
    //     return function(){
    //         clearInterval(time)
    //         time=setTimeout(a,b)
    //     }
    // }
    // let obj = document.querySelector('#txt')
    // obj.oninput=fun(()=>{
    //     console.log('最后我被触发了');
    // },500)




    // function fn(a,b){
    //     let last=null
    //     return function(){
    //         let start = +new Date()
    //         if(start-last>b){
    //             a()
    //             last=start
    //         }
    //     }
    // }
    // let test = document.querySelector('#test')
    // test.onmousemove=fn(()=>{
    //     console.log(event);
    //     var obj = document.querySelector('#box')
    //     obj.style.left=event.offsetX+'px'
    //     obj.style.top=event.offsetY+'px'

    // },100)


    // 防抖：频繁触发  浪费资源 所以咱们就要触发最后一次

    // let inp = document.querySelector('#txt')
    // // let t = null
    // inp.oninput = fd(() => {
    //     console.log(123);
    // }, 5000)


    // function fd(call, d) {
    //     let t = null
    //     return function () {
    //         if (t != null) {
    //             clearTimeout(t)
    //         }
    //         t = setTimeout(call, d)
    //     }
    // }


    // 节流 防止频繁触发 让他隔一段时间就触发
    // window.onscroll = jl(()=>{
    //     console.log(123);
    // },1000)

    // function jl(call, d) {
    //     let t = true
    //     return function () {
    //         if (t) {
    //             call()
    //             setTimeout(() => {
    //                 t = true
    //             },d)
    //         }
    //         t = false
    //     }
    // }





    // 防抖
    // function fn(a, b) {
    //     let  time;
    //     return function () {
    //         clearTimeout(time)
    //       time = setTimeout(a, b)
    //     }
    // }
    // let txt = document.querySelector('#txt')
    // txt.oninput = fn(() => {
    //     console.log(txt.value);
    // }, 1000)




    function fn(a,b) {
        let last=null
        return function(){
            let start = +new Date()
            if(start-last>=b){
                a()
                last=start
            }
        }
    }
    let obj = document.querySelector('#test')
    let c = document.querySelector('#box')
    obj.onmousemove=fn(()=>{
        c.style.left=event.offsetX+'px'
        c.style.top=event.offsetY+'px'
    },500)



    

</script>